<template>
  <div>
    <nav-header></nav-header>
    <div class="main-orderDetail">
      <!-- 关于订单流程  -->
      <!-- 1. 订单状态为21,22,25不展示此div.process; 2. 订单状态为20且又一次或以上的退款失败展示此div.process  -->
      <div class="process" 
        v-if="oOrderGood.orderStatus != '21' && oOrderGood.orderStatus != '22' && oOrderGood.orderStatus != '25'">
        <!-- 取消（0）下不展示流程，待付款（10）只有拼单中才展示流程，退款（21,22,25）不展示流程，已付款（20）但是拼单失败不展示流程 -->
        <div class="nowP" v-if="showProgress">
          <div class="now">当前位置</div>
          <!--订单流程  -->
          <div class="w-order">
            <div class="item-main">
              <div class="item-proce f-l" :style="{width: width}" v-for="(item, index) in proces" :key="index">
                <div class="f-l">
                  <div class="fontTitle">{{item.text}}</div>
                    <!--未评价状态之前通用样式  -->
                    <div v-if="index != 4">
                      <div :class="[item.procesed ? 'bg-c1' : 'bg-c2','order-img']"></div>
                    </div>

                    <!--评价状态通用样式  -->
                    <div v-else>
                      <div :class="[item.procesed ? 'bg-c3' : 'bg-c4','order-img']"></div>
                    </div>

                  <div class="fontTime">{{item.time}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="nowS">
          <div class="now">当前订单状态</div>
          <!--拍下商品  -->
          <div class="clearfix now-orderD" v-if="(oOrderGood.orderStatus == '10' || oOrderGood.orderStatus == '18') && !fightGoodsStatus && fightGoodsAlready">
            <div class="img">
              <img src="../../assets/icon_pay.png"/>
            </div>
            <div>
              <div class="tip" v-if="oOrderGood.orderStatus == '10'">等待买家付款</div>
              <div class="tip" v-if="oOrderGood.orderStatus == '18'">已付款30%</div>
            </div>
            <div class="fr">
              <w-button type="main" v-if="!oOrderGood.orderExplain" @on-click="goPay(oOrderGood.id)">去付款</w-button>
              <w-button type="default" @on-click="delOrder" style="margin-left: 8px">取消订单</w-button>
            </div>
          </div>

          <!-- 取消订单  -->
          <div class="clearfix now-orderD" v-if="oOrderGood.orderStatus == '0' && !fightGoodsStatus" style="text-align: center;">
            <div class="img">
              <img src="../../assets/icon_failure.png"/>
            </div>
            <div class="tip">关闭交易</div>
          </div>

          <!--退款  -->
          <div class="clearfix now-orderD" v-if="oOrderGood.orderStatus == '20' && !fightGoodsStatus" style="text-align: center;">
            <div class="img">
              <img src="../../assets/icon_payment.png"/>
            </div>
            <div class="tip" v-if="failRefundStatus">银行退款失败</div>
            <div class="tip" v-else>买家已付款</div>
          </div>

          <!--拼单失败  -->
          <div class="clearfix now-orderD" v-if="oOrderGood.orderStatus != '10' && fightGoodsStatus" style="padding: 0px 400px;">
            <div class="img">
              <img src="../../assets/icon_weichengtuan.png"/>
            </div>
            <div class="tip">未成团</div>
            <div class="fr" style="line-height: 30px">
              <span>系统会自动退款到您的原来账户，请注意查收！</span>
            </div>
          </div>

          <!--拼单完成，未付款  -->
          <div class="clearfix now-orderD" v-if="oOrderGood.orderStatus == '10' && (!fightGoodsAlready || fightGoodsStatus)" style="padding: 0px 400px;">
            <div class="img">
              <img src="../../assets/icon_weichengtuan.png"/>
            </div>
            <div class="tip">未成团</div>
            <div class="fr" style="line-height: 30px">
              <span>拼单已结束，请等待下次拼单！</span>
            </div>
          </div>
              
          <!--确认收货  -->
          <div class="clearfix now-orderD" v-if="oOrderGood.orderStatus == '30'" style="text-align: center;">
            <div class="img">
              <img src="../../assets/icon_shipped.png"/>
            </div>
            <div class="tip">等待买家收货</div>
             <!-- <div class="tip-detail" id="tip">
               您还有
               <w-count-down-time 
                :start="curTime"
                :target="oOrderGood.receiverTime"
                @on-timer="onTimer">
              </w-count-down-time>
               来确认收货 超时订单自动确认收获
            </div>  -->
            <!-- <div class="fr">
              <w-button type="main" @on-click="confirm(oOrderGood.id)">确认收货</w-button>
            </div> -->
          </div>

          <!--去评价  -->
          <div class="clearfix now-orderD" v-if="oOrderGood.orderStatus == '40'">
            <div class="img">
              <img src="../../assets/icon_eval.png"/>
            </div>
            <div class="tip">交易成功</div>
            <div class="fr">
              <w-button type="main" @on-click="$router.push(`./orderEvaluate?id=${oOrderGood.id}`)">去评价</w-button>
            </div>
          </div>

          <!--已评价  -->
          <div class="clearfix now-orderD" v-if="oOrderGood.orderStatus == '50'" style="text-align: center">
            <div class="img">
              <img src="../../assets/icon_success.png"/>
            </div>
            <div class="tip">交易成功</div>
          </div>
        </div>
      </div>

      <!-- 关于退款  -->
      <div class="refund" v-if="oOrderGood.orderStatus == '21' || oOrderGood.orderStatus == '22' || oOrderGood.orderStatus == '25'">
        <div v-if="refundList.length > 0"> 
          <div class="nowP">
            <div class="now">当前订单状态</div>
            <!--退款，等待审核中  -->
             <div class="now-orderD" v-if="refundStatus.status == 0">
              <div class="img">
                <img src="../../assets/icon_waiting.png"/>
              </div>
              <div class="tip">等待卖家审核</div>
            </div> 
            <!--退款审核通过，退款中 -->
             <div class="now-orderD" v-if="refundStatus.status == 1 && oOrderGood.orderStatus == '22'">
              <div class="img">
                <img src="../../assets/icon_refundSuccess.png"/>
              </div>
              <div class="tip">商家同意退款</div>
            </div> 
            <!--退款失败  -->
            <div class="now-orderRefund clearfix" v-if="refundStatus.status == 2">
              <div class="refund-cancel">
                <div>
                  <div class="img">
                    <img src="../../assets/icon_refundFail.png"/>
                  </div>
                  <div class="tip">商家不同意退款</div>
                </div>
                <!-- 返回商家审核不通过原因  -->
                <div class="cancel-reason">
                  原因：{{refundStatus.auditFailReason}}
                </div>
              </div>
            </div>
            <!--退款完成  -->
            <div class="now-orderD" v-if="refundStatus.status == 1 && oOrderGood.orderStatus == '25'">
              <div class="img">
                <img src="../../assets/icon_refundSuccess1.png"/>
              </div>
              <div class="tip">退款完成</div>
            </div> 
          </div>
        </div>  
      </div>

      <!--tab切换  -->
      <div class="tab">
        <div class="btn-group">
          <button class="btn btn-det btnActive">订单信息</button>
        </div>
        <!--订单信息  -->
        <div class="clearfix btn-detail">
          <div class="fl goodsDetil">
            <span class="title title-goods">收货信息</span>
            <div class="box-goods">
              <div class="goodsinfo">
                <span class="label">订单号：</span><span class="label-detail">{{oOrderGood.orderId}}</span>
              </div>
              <div class="goodsinfo">
                <span class="label">收货人：</span><span class="label-detail">{{oOrderGood.receiverName}}</span>
              </div>
              <div class="goodsinfo">
                <span class="label">收货地址：</span><div class="goods-address label-detail">{{oOrderGood.receiverArea}}{{oOrderGood.receiverAreaInfo}}</div>
              </div>
              <div class="goodsinfo">
                <span class="label">手机：</span><span class="label-detail">{{oOrderGood.receiverMobile}}</span>
              </div>
            </div>
          </div> 
          <div class="fr buyersDetil">
            <span class="title title-buyers">卖家信息</span>
            <div class="box-buyers">
              <div class="buyersinfo">
                <span class="label">供应商：</span><span class="label-detail">{{storeInfo.storeName || '暂无'}}</span>
              </div>
              <div class="buyersinfo">
                <span class="label">地址：</span><div class="buyers-address label-detail">{{storeInfo.storeArea || '暂无'}}</div>
              </div>
              <div class="buyersinfo">
                <span class="label">手机：</span><span class="label-detail">{{storeInfo.storeTelephone || '暂无'}}</span>
              </div>
              <div class="buyersinfo" v-if="oOrderGood.orderStatus == '18'">
                <span class="label receipt" @click="$router.push(`../receipt?orderId=${oOrderGood.id}`)">点击详情</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--订单详情列表  -->
      <div class="orderDetails">
        <span class="title">{{oOrderGood.storeName}}</span>

        <!-- 已付款 -->
        <div class="already-pay" v-if="oOrderGood.orderStatus >= '20' && oOrderGood.orderStatus < '30'">
          <ul class="order-title">
            <li class="label-detail goods-width">货品</li>
            <li class="label-detail other">总数量</li>
            <li class="label-detail other">单价</li>
            <li class="label-detail other">商品操作</li>
            <li class="label-detail other">金额</li>
          </ul>
          <div v-for="(orderInfo, index) in oOrderGood.goodsInfoList" :key="index">
            <div class="orderDetail" v-for="(info, infoIndex) in orderInfo.goodsGsp" :key="infoIndex">
              <div style="display:table-cell;">
                <div>
                  <div class="shopImg" @click="goGoodsDetail(orderInfo.goods_id)">
                    <img class="minimg" v-lazy="orderInfo.goods_mainphoto_path" /> 
                  </div>
                  <div class="shop-r">
                    <div class="shop-r-t" @click="goGoodsDetail(orderInfo.goods_id)">
                      <span>{{orderInfo.goods_name}}</span>
                      <br>
                      <span class="goods-type" v-if="orderInfo.goodsType == 1">伙拼</span>
                    </div>
                    <div class="shop-r-b textC-dark">
                      <span class="shop-r-b-l">颜色：{{info.goodsSpecContent[0]}}</span>
                      <span class="shop-r-b-r">尺码：{{info.goodsSpecContent[1]}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-list textC-dark">{{info.count || 0}}</div>
              <div class="item-list textC-main">￥{{info.goodsSinglePrice | currency}}</div>
              <div 
                class="item-list btn-options" 
                v-if="((!cancelStatus && !failRefundStatus) || failRefundStatus) && (oOrderGood.paymentName != '浙江农商行' || oOrderGood.paymentName != '农商行')"
                @click="jumpRefund(oOrderGood.id, info.goodsCartId, info.refundStatus, info.refundType)">退款</div>
              <div class="item-list btn-options disabled" v-else>不可退款</div>
              <div class="item-list textC-main">￥{{info.goodsPrice | currency}}</div>
            </div>
          </div>
        </div>

        <!-- 已发货 -->
        <div class="devery orderDetails" v-else-if="oOrderGood.orderStatus >= '30'">
          <ul class="order-title">
            <li class="label-detail" style="width: 22%">货品</li>
            <li class="label-detail" style="width: 8%">总数量</li>
            <li class="label-detail" style="width: 9%">单价</li>
            <li class="label-detail" style="width: 9%">商品操作</li>
            <li class="label-detail" style="width: 8%">剩余数量</li>
            <li class="label-detail" style="width: 13%">发货编号</li>
            <li class="label-detail" style="width: 9%">发货量</li>
            <li class="label-detail" style="width: 8%">收货状态</li>
            <li class="label-detail" style="width: 13%">操作</li>
          </ul>
          <div>
            <div class="orderDetail" v-for="(orderInfo, index) in oOrderGood.goodsInfoList" :key="index">
              <div v-for="(info, infoIndex) in orderInfo.goodsGsp" :key="infoIndex" style="margin: 1px;">
                <!-- 存在发货信息 -->
                <div v-if="info.delivery && info.delivery.length">
                  <!-- 商品信息 -->
                  <div style="display:table-cell;width: 22%;vertical-align: middle;">
                    <div>
                      <div class="shopImg" @click="goGoodsDetail(orderInfo.goods_id)">
                        <img class="minimg" v-lazy="orderInfo.goods_mainphoto_path" /> 
                      </div>
                      <div class="shop-r">
                        <div class="shop-r-t" @click="goGoodsDetail(orderInfo.goods_id)">
                          <span>{{orderInfo.goods_name}}</span>
                        </div>
                        <div class="shop-r-b textC-dark">
                          <span class="shop-r-b-l">颜色：{{info.goodsSpecContent[0]}}</span>
                          <span class="shop-r-b-r">尺码：{{info.goodsSpecContent[1]}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 总数量 -->
                  <div class="item-list" style="width: 8%">{{info.count || 0}}件</div>
                  <!-- 单价 -->
                  <div class="item-list" style="width: 9%">￥{{info.goodsSinglePrice | currency}}</div>
                  <!-- 商品操作 -->
                  <div class="item-list btn-options" style="width: 9%" 
                    v-if="((!cancelStatus && !failRefundStatus) || failRefundStatus) && (oOrderGood.paymentName != '浙江农商行' || oOrderGood.paymentName != '农商行')"
                    @click="jumpRefund(oOrderGood.id, info.goodsCartId, info.refundStatus, info.refundType)">退款</div>
                  <div class="item-list btn-options disabled" v-else>不可退款</div>
                  <!-- 剩余数量 -->
                  <div class="item-list" style="width: 8%">{{_calculateCount(info.count, info.delivery) || 0}}件</div>
                  <!-- 发货信息 -->
                  <div class="item-list" style="width: 44%" v-if="info.delivery && info.delivery.length">
                    <div class="list-info" v-for="(dev, index) in info.delivery" :key="index">
                      <!-- 发货编号 -->
                      <div class="item-list" style="width: 30%">{{dev.orderNo || '--'}}</div>
                      <!-- 发货量 -->
                      <div class="item-list" style="width: 20%">{{dev.deliveryCount || 0}}件</div>
                      <!-- 收货状态 -->
                      <div class="item-list" style="width: 18%" :class="{'c-main': dev.status == '0', 'c-grey': dev.status == '1'}">{{dev.status == 1 ? '已收货' : '待收货'}}</div>
                      <!-- 操作 -->
                      <div class="item-list options" style="width: 65%">
                        <span @click="_showDeliveryPannel(dev.orderNo, oOrderGood.id)">查看物流</span>
                        <span v-if="dev.status == '0'" @click="onConfirmOrder(oOrderGood.id, dev.orderNo)"> | 确认收货</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 没有发货信息 -->
                <div v-else>
                  <!-- 商品信息 -->
                  <div style="display:table-cell;width: 22%;vertical-align: middle;">
                    <div>
                      <div class="shopImg" @click="goGoodsDetail(orderInfo.goods_id)">
                        <img class="minimg" v-lazy="orderInfo.goods_mainphoto_path" /> 
                      </div>
                      <div class="shop-r">
                        <div class="shop-r-t" @click="goGoodsDetail(orderInfo.goods_id)">
                          <span>{{orderInfo.goods_name}}</span>
                        </div>
                        <div class="shop-r-b textC-dark" v-if="info.goodsSpecContent">
                          <span class="shop-r-b-l">颜色：{{info.goodsSpecContent[0]}}</span>
                          <span class="shop-r-b-r">尺码：{{info.goodsSpecContent[1]}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 总数量 -->
                  <div class="item-list" style="width: 8%">{{info.count || 0}}件</div>
                  <!-- 单价 -->
                  <div class="item-list" style="width: 9%">￥{{info.goodsSinglePrice | currency}}</div>
                  <!-- 商品操作 -->
                  <div class="item-list btn-options" style="width: 9%" 
                    v-if="((!cancelStatus && !failRefundStatus) || failRefundStatus) && (oOrderGood.paymentName != '浙江农商行' || oOrderGood.paymentName != '农商行')"
                    @click="jumpRefund(oOrderGood.id, info.goodsCartId, info.refundStatus, info.refundType)">退款</div>
                  <div class="item-list btn-options disabled" v-else>不可退款</div>
                  <!-- 剩余数量 -->
                  <div class="item-list" style="width: 8%">--</div>
                  <!-- 发货信息 -->
                  <div class="item-list" style="width: 44%">
                    <div class="list-info">
                      <!-- 发货编号 -->
                      <div class="item-list" style="width: 30%">--</div>
                      <!-- 发货量 -->
                      <div class="item-list" style="width: 20%">--</div>
                      <!-- 收货状态 -->
                      <div class="item-list" style="width: 18%">--</div>
                      <!-- 操作 -->
                      <div class="item-list options" style="width: 65%">--</div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <!-- 其他状态 -->
        <div class="wait-pay" v-else>
          <ul class="order-title">
            <li class="label-detail goods-width">货品</li>
            <li class="label-detail other">总数量</li>
            <li class="label-detail other">单价</li>
            <li class="label-detail other">金额</li>
          </ul>
          <div v-for="(orderInfo, index) in oOrderGood.goodsInfoList" :key="index">
            <div class="orderDetail" v-for="(info, infoIndex) in orderInfo.goodsGsp" :key="infoIndex">
              <div style="display:table-cell;">
                <div>
                  <div class="shopImg" @click="goGoodsDetail(orderInfo.goods_id)">
                    <img class="minimg" v-lazy="orderInfo.goods_mainphoto_path" /> 
                  </div>
                  <div class="shop-r">
                    <div class="shop-r-t" @click="goGoodsDetail(orderInfo.goods_id)">
                      <span>{{orderInfo.goods_name}}</span>
                      <br>
                      <span class="goods-type" v-if="orderInfo.goodsType == 1">伙拼</span>
                    </div>
                    <div class="shop-r-b textC-dark">
                      <span class="shop-r-b-l">颜色：{{info.goodsSpecContent[0]}}</span>
                      <span class="shop-r-b-r">尺码：{{info.goodsSpecContent[1]}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-list textC-dark">{{info.count || 0}}</div>
              <div class="item-list textC-main">￥{{info.goodsSinglePrice | currency}}</div>
              <div class="item-list textC-main">￥{{info.goodsPrice | currency}}</div>
            </div>
          </div>
        </div>

        <div class="clearfix money">
          <div class="fl tell">
            <span class="textC-dark text-t">给卖家留言</span>
            <div class="textC-dark message">{{oOrderGood.msg}}</div>
          </div>
          <div class="fr total">
            <div class="freight">
              <span class="freight-total">运费共计：</span><span>￥{{oOrderGood.shipPrice || 0}}</span>
            </div>
            <div class="freight" v-if="oOrderGood.isChangePrice == 1">
              <span class="freight-total">店铺优惠：</span><span>￥{{oOrderGood.subtrahendPrice || 0 | currency}}</span>
            </div>
            <div class="money-all">
              <span class="money-total">货品总金额：</span><span class="textC-main">￥{{oOrderGood.goodsAmount || 0}}</span>
            </div>
          </div>
        </div>
      </div>

      <!--总计  -->
      <div class="clearfix all">
        <div class="fl">
          <span class="text-all">合计</span>
        </div>
        <div class="fr mar-r">
          <span class="textC">共计</span>
          <span class="textC count">{{totalCount || 0}}件</span>
          <span class="textC">货品金额：</span>
          <span class="textC-main">￥{{oOrderInfo.PriceAddshipPrice || 0}}元</span>
        </div>
      </div>
    </div>

    <!--取消订单模态框  -->
    <div class="dialog-modal" v-show="isDelOrder" >
      <div class="bg"></div>
      <div class="modal">
        <!--关闭弹框按钮  -->
        <button type="button" class="btn-close transition-ease close" @click="closePopup()">
          <span class="iconfont ico-close"></span>
        </button>
        <div class="detail">
          <span class="tiltle">关闭原因</span>
           <div class="select">
            <w-select :options="delOrderList" v-model="refundSelected" ref="refundSelected"></w-select>
          </div> 
        </div>
        <div class="detail">
          <span class="tiltle">备注</span>
          <textarea placeholder="内容在2-200字之间，建议填写取消订单相关信息" v-model="refundConent"></textarea>
        </div>
        <div class="btn-main">
          <w-button type="main" class="btnC" @on-click="commitDelOrder(oOrderGood.id)">提交</w-button>
        </div>
      </div>
    </div>

    <!-- 查看物流弹出框 -->
    <w-panel-fixed-wrap :panel-title="true" :show-close="true" title="物流详情" v-model="lookDevPanel" :width="`800px`" :height="`520px`" :show-btns="false">
      <div class="dev-info">
        <div class="dev-title">
          <span style="margin: 0 100px 0 30px;">时间</span>
          <span>地点和跟踪进度</span>
        </div>

        <!-- 物流详细信息 -->
        <div class="logistics" v-if="shipInfo && shipInfo.length">
          <!-- 时间分组 -->
          <div class="time-group" v-for="(item, index) in shipInfo" :key="index">
            <div class="time-number fl" v-if="item.time">
              <span class="date">{{item.time.substr(0, 9)}}</span>
              <div class="date-week">
                <span class="time">{{item.time.substr(10)}}</span>
              </div>
            </div>
            <div class="logistics-info">
              <p>{{item.status}}</p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="logistics" v-else>
          <p>暂无物流信息</p>
        </div>
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
  import header from './components/header'
  import { mapGetters } from 'vuex'
  import { apiOrderByIds, apiStoreInfo, apiGetExpress, apiRefundOrderFormById, apiRefundOrderForStatusmById, apiEditOrderStatus, apiGoodsDetail, apiGoodsDetailRule, apiSelectdictionaryDataByTypeId } from 'js/api'

  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        const orderId = to.query.id
        vm.fetchOrderByIds(orderId)
      })
    },
    data() {
      return {
        proces: [
          {
            text: '拍下商品',
            time: '',
            procesed: true
          },
          {
            text: '已付款',
            time: '',
            procesed: false
          },
          {
            text: '已发货',
            time: '',
            procesed: false
          },
          {
            text: '确认收货',
            time: '',
            procesed: false
          },
          {
            text: '评价',
            time: '',
            procesed: false
          }
        ],
        lookDevPanel: false, // 物流信息
        isModal: false, // 退款模态框，显隐
        isDelOrder: false, // 取消订单模态框判断,默认隐藏
        failRefundStatus: false, // 银行退款状态
        cancelStatus: false, // 拒绝同意退款2次
        cancelStatusO: true, // 拒绝同意退款1次
        cancelStatusZ: true, // 拒绝同意退款0次
        oOrderInfo: {}, // 整个订单详情
        oOrderGood: {}, // 订单商品详情,
        orderID: '',
        goods_id: '',
        count: 0, // 商品总数量
        isAlready: '', // 拼单是否完成，1完成；0未完成
        fightGoodsEndTime: '', // 拼单结束时间
        fightGoodsStatus: false, // 拼单未成团状态
        fightGoodsAlready: true, // 拼团成功
        storeId: '', // 商家ID,根据商家ID查询商家基本信息storeInfo
        storeInfo: {}, // 商家信息
        shipCode: '', // 物流订单编号
        orderStatus: '', // 订单状态
        shipInfo: {}, // 物流信息
        redundPic: [], // 退款图片
        refundConent: '', // 退款原因主要内容
        refundStatus: {}, // 退款商品原因
        curTime: '', // 倒计时
        ship: '', // 发货时间
        refundList: [], // 退款原因详情列表
        delOrderList: [
          {value: '', label: ''}
        ],
        refundSelected: '',
        isCountDown: true // 等待付款倒计时，超过则false
      }
    },
    components: {
      'nav-header': header
    },
    computed: {
      ...mapGetters(['token']),
      width() {
        return `${100 / this.proces.length}%`
      },
      // aGoodsInfo() { // 商品列表信息
      //   if (this.oOrderGood.goodsInfo) {
      //     return this.oOrderGood.goodsInfo.goodsGsp
      //   }
      // },
      /**
       * 控制是否展示拼单进度
       * 取消（0）下不展示流程，待付款（10）只有拼单中才展示流程，退款（21,22,25）不展示流程，已付款（20）但是拼单失败不展示流程
       */
      showProgress() {
        // 当前是取消，不展示流程
        if (this.oOrderGood.orderStatus == 0) {
          return false
        }
        // 待付款，且不是拼单中，这不展示进度
        if (this.oOrderGood.orderStatus == 10 && this.oOrderGood.isAlready != '0' && this.oOrderGood.goodsType == '1') {
          return false
        }
        // 退款（21,22,25）不展示流程
        if (this.oOrderGood.orderStatus == 21 || this.oOrderGood.orderStatus == 22 || this.oOrderGood.orderStatus == 25) {
          return false
        }
        // 已付款（20）但是拼单失败不展示流程
        if (this.oOrderGood.orderStatus == 20 && this.isAlready == -1) {
          return false
        }
        return true
      },
      /**
       * 循环订单中总的商品数量
       */
      totalCount() {
        if (this.oOrderGood.goodsInfoList && this.oOrderGood.goodsInfoList.length > 0) {
          this.oOrderGood.goodsInfoList.forEach(count => {
            this.count += count.goodsTotalcount
          })
          return this.count
        }
        return 0
      }
    },
    created() {
      // 如果有重定向链接
      if (this.$route.query.redirect) {
        setTimeout(() => {
          this.$router.push(`my/order`)
        }, 1000)
        return
      }
      this.fetchSelectdictionaryDataByTypeId()
    },
    methods: {
      /**
       * 计算发货剩余量
       * @params allCount: 总数量
       * @params countList: 发货列表信息
       */
      _calculateCount(allCount, countList) {
        let count = 0
        allCount = Number(allCount)
        if (!countList || countList.length == 0) return
        countList.forEach(v => {
          count += Number(v.deliveryCount)
        })
        if (allCount - count > 0) return allCount - count
        return 0
      },
      /**
       * 退款跳转页面
       */
      jumpRefund(orderid, goodsCartId, status, refundType) {
        // 若该sku已退款，则进入详情页
        if (status == '0' || status == '1' || status == '2') {
          if (refundType == '1') {
            this.$router.push(`/repay/pay?id=${orderid}&carid=${goodsCartId}`)
          }
          if (refundType == '2') {
            this.$router.push(`/repay/pg?id=${orderid}&carid=${goodsCartId}`)
          }
          if (refundType == '3') {
            this.$router.push(`/regoods?id=${orderid}&carid=${goodsCartId}`)
          }
        } else {
          this.$router.push(`/reindex/${orderid}/${goodsCartId}`)
        }
      },
      // closeOrder() { // 30分钟未付款，更新订单状态0
      //   this.isCountDown = false
      //   this.fetchEditOrderStatus(this.token, this.orderID, '0')
      //   // this.fetchOrderByIds(this.orderID)
      // },
      // 根据订单id获取订单信息
      fetchOrderByIds(ids) {
        // 让页面跳转到顶部
        window.scroll(0, 0)
        apiOrderByIds(this.token, ids).then(data => {
          this.oOrderInfo = data
          this.curTime = new Date(this.oOrderInfo.currentTime) // 服务器当前时间
          if (data.orderFormList.length) {
            const orderFormList = data.orderFormList[0]
            let goodsInfo = orderFormList.goodsInfoList || '[]'
            goodsInfo = goodsInfo.length ? goodsInfo[0] : {}
            orderFormList.goodsInfo = goodsInfo
            this.oOrderGood = orderFormList
            this.orderID = this.oOrderGood.id
            this.storeId = this.oOrderGood.storeId
            this.goods_id = this.oOrderGood.goodsInfo.goods_id
            this.shipCode = this.oOrderGood.shipCode
            this.orderStatus = this.oOrderGood.orderStatus
            this.fetchStoreId(this.storeId)
            /**
             * 订单状态为待收货之前，才进行众筹时间验证
             */
            if (this.orderStatus <= '20') {
              this.fetchGoodsDetailRule(this.goods_id)
            }
            this.getOrderInfo(this.orderStatus)
            if (this.orderStatus == '20' || this.orderStatus == '21' || this.orderStatus == '22' || this.orderStatus == '25') {
              this.fetchRefundOrderForStatusmById(ids, 1)
            } else if (this.orderStatus == '10') {
              this.fetchRefundOrderForStatusmById(ids, 2)
            }
          }
        })
      },
      // 根据商家ID获取商家的地址和手机号基本信息
      fetchStoreId(storeId) {
        apiStoreInfo(storeId, this.token).then(data => {
          this.storeInfo = data
        })
      },
      /**
      * 根据商品sku的发货单号，查询该次的物流信息
      */
      _showDeliveryPannel(shipCode, orderid) {
        this.lookDevPanel = true
        apiGetExpress(shipCode, orderid).then(data => {
          const ship = data
          this.shipInfo = JSON.parse(ship.info || '[]')
        })
      },
      // 获取订单的状态，时间
      getOrderInfo(orderStatus) {
        if (orderStatus == '10') {
          this.proces[0].time = this.oOrderGood.addtime
        } else if (orderStatus == '20') {
          this.procesedTrue(1)
        } else if (orderStatus == '30') {
          this.procesedTrue(2)
        } else if (orderStatus == '40') {
          this.procesedTrue(3)
        } else if (orderStatus == '50') {
          this.procesedTrue(4)
        }
      },
      procesedTrue(index) { // 循环显示状态是否已完成
        this.proces.forEach((item, i) => {
          item.procesed = false
          item.time = ''
          if (i <= index) {
            item.procesed = true
          }
        })
        this.procesTime()
      },
      procesTime() { // 订单流程中，每个订单状态的时间
        this.proces[0].time = this.oOrderGood.addtime // 拍下时间
        if (!this.oOrderGood.payTime) return
        this.proces[1].time = this.oOrderGood.payTime.slice(0, 19) // 付款时间，并去除毫秒
        if (!this.oOrderGood.shipTime) return
        this.proces[2].time = this.oOrderGood.shipTime.slice(0, 19) // 发货时间，并去除毫秒
        if (!this.oOrderGood.confirmTime) return
        this.proces[3].time = this.oOrderGood.confirmTime.slice(0, 19) // 收货时间，并去除毫秒
        if (!this.oOrderGood.finishTime) return
        this.proces[4].time = this.oOrderGood.finishTime.slice(0, 19) // 评价时间，并去除毫秒
        this.ship = this.proces[2].time
      },
      // onTimer() {
      //   // if (!this.oOrderGood.shipTime) return
      //   this.fetchEditOrderStatus(this.token, this.orderID, '40')
      // },
      // 跳转商品详情
      goGoodsDetail(goodsId) {
        apiGoodsDetail(goodsId, this.token).then(data => {
          this.$router.push('../goods/detail/' + goodsId)
        })
      },
      // 去付款
      goPay(orderId) {
        this.$router.push(`../payment?ids=${orderId}`)
      },
      // 取消订单
      delOrder() {
        this.isDelOrder = !this.isDelOrder // 模特框显示
      },
      // 取消订单模态框的提交
      commitDelOrder(orderId) {
        if (!this.$refs.refundSelected.value) {
          this.$toast('请选择取消订单原因')
        } else {
          apiRefundOrderFormById(this.token, orderId, this.$refs.refundSelected.value, this.refundConent, this.redundPic, 2).then(data => {
            this.fetchOrderByIds(orderId)
          })
          // 清空退款原因
          this.$refs.refundSelected.value = ''
          this.refundConent = ''
          this.isDelOrder = !this.isDelOrder
        }
      },
      /**
      * 关闭弹框
      */
      closePopup() {
        // 展示加载动画
        this.isDelOrder = false
        this.isModal = false

        // 清空理由
        this.refundSelected = ''

        // 清空备注
        this.refundConent = ''

        // 清空图片
        this.redundPic = []

        // 让父级销毁此组件
        setTimeout(() => {
          this.$emit('close')
        }, 400)
      },
      /** 确认收货操作 */
      onConfirmOrder(id, orderNo) {
        let $this = this
        const orderId = id
        this.$modal({
          title: '',
          content: '您现在确认收货吗？',
          onConfirm() {
            apiEditOrderStatus($this.token, id, '29', orderNo).then(data => {
              $this.$toast('确认收货', () => {
                $this.$router.push(`../orderEvaluate?id=${orderId}`)
              })
            })
          }
        })
      },
      fetchEditOrderStatus(token, id, orderStatus, orderNo) { // 确认收货
        apiEditOrderStatus(token, id + '', orderStatus, orderNo).then(data => {
          this.fetchOrderByIds(id)
        })
      },
      // 模态框--退款
      modal() {
        this.isModal = !this.isModal
      },
      /**
       * // 查询退款审核状态
       */
      fetchRefundOrderForStatusmById(orderId, refundType) {
        apiRefundOrderForStatusmById(this.token, orderId, refundType).then(data => {
          this.refundList = data.refundApplyFormList
          this.refundStatus = data.refundApplyFormList[0]
          let arrListStatus = []
          let arrListFail = []
          data.refundApplyFormList.forEach((item, index) => {
            const status = item.status
            const failRefund = item.failRefund
            // 拒绝同意退款次数
            if (status == 2) {
              arrListStatus.push(index)
              if (arrListStatus.length == 2) {
                this.cancelStatus = true
              } else if (arrListStatus.length == 1) {
                this.cancelStatusO = false
              } else if (arrListStatus.length == 0) {
                this.cancelStatusZ = true
              }
            }
            // 退款失败的次数
            if (failRefund == 1) {
              arrListFail.push(index)
              if (arrListFail.length >= 1) {
                this.failRefundStatus = true
              } else {
                this.failRefundStatus = false
              }
            }
          })
        })
      },
      /**
       * 查询商品拼单状态
       */
      fetchGoodsDetailRule(goodsId) {
        apiGoodsDetailRule(goodsId + '').then(data => {
          if (data.crowdFundRules && data.crowdFundRules[0]) {
            this.isAlready = data.crowdFundRules[0].isAlready
            this.fightGoodsEndTime = data.crowdFundRules[0].fightGoodsEndTime
            if (this.isAlready == -1) {
              this.fightGoodsStatus = true
            } else if (this.isAlready == 1) {
              this.fightGoodsAlready = false
            }
          }
        })
      },
      fetchSelectdictionaryDataByTypeId() { // 原因数据字典
        apiSelectdictionaryDataByTypeId().then(data => {
          this.delOrderList = data.DictionaryDataList
          this.delOrderList.forEach(item => {
            item.value = item.dataName
            item.label = item.dataName
          })
        })
      }
    },
    watch: {
      $route(to, from) {
        // if (to.query.id == from.query.id) return
        // this.$router.go(0)
        this.fetchOrderByIds(to.query.id || '')
      }
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_var.scss';
  $fontSize: 12px;
  $fontSizeE: 16px;
  $border-solid: #ddd;
  .nowS {
    .btn {
      width: 100px;
      height: 30px;
    }
  }
  .btn.default {
    background-color: $color-white;
    border: 1px solid $border-solid;
    margin-left: 20px;
  }
  .btnUpdate {
    display: inline-block;
    vertical-align: bottom;
    .updateBtn {
      height: 30px;
    }
  }
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .close-order {
    display: block !important;
    margin-top: 10px;
  }
  .main-orderDetail {
    width: 1230px;
    height: auto;
    margin: 10px auto 50px;
    // 订单流程
    .process {
      background-color: $color-white;
      .nowP {
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
        .now {
          margin-bottom: 20px;
          margin-left: 20px;
          color: $color-dark;
        }
        .w-order {
          width: 100%;
          display: inline-block;
          padding: 0 165px;
        }
      }
      .nowS {
        padding: 20px 20px 44px 20px;
        .now {
          margin-bottom: 9px;
          color: #666;
        }
        .now-orderD {
          // margin: 0 auto 43px 221px;
          padding: 0 340px;
          .img {
            width: 30px;
            height: 30px;
            display: inline-block;
            margin-right: 6px;
          }
          .btn-mar {
            margin-left: 296px;
          }
          div {
            display: inline-block;
            vertical-align: middle;
            color: $color-main;
            &.tip-detail {
              display: inline-block;
              vertical-align: middle;
              max-width: 210px;
              color: #999;
              font-size: 12px;
              margin: 0 34px;
              line-height: 16px;
            }
            
          }
        }
      }
    }
    // 退款
    .refund {
      background-color: $color-white;
      .nowP {
        padding: 20px 20px 0;
        border-bottom: 1px solid #ddd;
        .now {
          color: $color-dark;
        }
        .now-orderD {
          margin: 8px auto 43px;
          text-align: center;
        }
        .refund-cancel {
          display: inline-block;
          max-width: 400px;
          line-height: 15px;
        }
        .img {
          width: 34px;
          height: 34px;
          display: inline-block;
          margin-right: 10px;
        }
        .tip {
          display: inline-block;
          vertical-align: top;
          color: $color-main;
          line-height: 34px;
        }
        .cancel-reason {
          display: inline-block;
          font-size: 12px;
          color: $color-dark;
          margin-left: 48px;
        }
        .now-orderRefund {
          margin: 8px 330px 43px;
        }
      }
      .refund-details {
        padding: 20px;
        .refund-info {
          margin-bottom: 20px;
          font-size: $fontSize;
          .refund-title {
            color: $color-disabled;
            width: 60px;
            display: inline-block;
            text-align: right;
            vertical-align: top;
          }
          .refund-detail {
            color: $color-dark;
            display: inline-block;
            max-width: 870px;
          }
          &.ul {
            margin-bottom: 0;
          }
          ul {
            max-width: 840px;
            display: inline-block;
            li {
              width: 80px;
              height: 80px;
              margin-left: 20px;
              display: inline-block;
            }
          }
        }
      }
    }

    // tab切换
    .tab {
      border: 1px solid $border-solid;
      margin: 20px auto;
      background-color: $color-white;
      .receipt {
        cursor: pointer;
        color: $color-main !important;
      }
      .btn-group {
        height: 50px;
        background-color: $bg-gray;
        margin: 0;
        border-bottom: 1px solid $border-solid;
        .btn-det {
          height: inherit;
          text-align: center;
          color: $color-black;
          border-right: 1px solid $border-solid;
          margin-right: 0;
        }
        .btnActive {
          background-color: $color-white;
          border-bottom: none;
        }
      }
      .btn-detail {
          padding: 0 164px 10px;
        .title {
          color: $color-dark;
          margin-top: 30px;
          margin-bottom: 19px;
          display: block;
          font-size: 14px;
        }
        .label {
          font-size: $fontSize;
          color: $color-gray;
          text-align: right;
          width: 70px;
          margin-left: -20px;
          display: inline-block;
          vertical-align: top;
        }
        .label-detail {
          color: $color-dark;
          font-size: $fontSize;
          vertical-align: top;
        }
        .goodsDetil {
          .box-goods {
            max-width: 380px;
            font-size: $fontSize;
            .goodsinfo {
              margin-bottom: 20px;
              .goods-address {
                max-width: 300px;
                display: inline-block;
              }
            }
          }
        }
        .buyersDetil {
          .buyersinfo {
            margin-bottom: 18px;
          }
          .buyers-address {
            max-width: 220px;
            display: inline-block;
          }
        }
      }
    }
    // 订单详情列表
    .orderDetails {
      border: 1px solid $border-solid;
      background-color: $color-white;
      .title {
        color: $color-dark;
        display: block;
        margin: 21px auto 12px 21px;
        font-size: 14px;
      }
      .textC-dark {
        color: $color-dark;
      }
      // 等待付款
      .wait-pay {
        .goods-width {
          width: 34%;
        }
        .other {
          width: 22%;
        }
        .orderDetail {
          .item-list {
            width: 22%
          }
        }
      }
      // 已付款
      .already-pay {
        .goods-width {
          width: 24%;
        }
        .other {
          width: 19%;
        }
        .orderDetail {
          .item-list {
            width: 19%
          }
        }
      }
      // 已发货
      .devery {
        border: none;
        .list-info {
          padding: 5px 0;
          width: 100%;
          display: inline-table;
          .options {
            color: #2D8EFE;
            span {
              cursor: pointer
            }
          }
        }
      }
      .order-title {
        border-top: 1px solid $border-solid;
        border-bottom: 1px solid $border-solid;
        font-size: 0;
        padding: 0 18px;
        .other {
          text-align: center;
        }
        .label-detail {
          color: $color-dark;
          font-size: $fontSize;
          margin: 8px 0;
          display: inline-block;
          text-align: center;
        }
      }
      .orderDetail {
        padding: 14px 18px 21px;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        border-top: none;
        display: table;
        width: 100%;
        .shopImg {
          width: 80px;
          height: 80px;
          float: left;
          margin-right: 9px;
          cursor: pointer;
        }
        .shop-r {
          display: table-cell;
          height: 80px;
          width: 180px;
          padding: 0;
          font-size: $fontSize;
          &-t {
            height: 40px;
            margin-bottom: 26px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            // width: 180px;
            .goods-type{
              color:$color-white;
              background: $color-main;
              padding:2px 5px;
              position: relative;
              top: 5px;
              &:hover {
                cursor: pointer;
                color: #fff;
              }
            }
            span {
              &:hover {
                cursor: pointer;
                color: $color-main;
              }
            }
          }
          &-b {
            &-l {
              float: left;
            }
            &-r {
              float: right;
            }
          }
        }
        .item-list {
          vertical-align: middle;
          text-align: center;
          display: table-cell;
          &.textC-main {
            color: $color-main;
          }
          &.btn-options {
            color: #2D8EFE;
            cursor: pointer;
          }
        }
        .disabled {
          color: $border-gray !important;
        }
      }
      .money {
        padding: 18px 0 0 30px;
        .tell {
          width: 70%;
          margin-top: 10px;
          margin-bottom: 16px;
          .text-t {
            vertical-align: top;
          }
          .message {
            max-width: 560px;
            margin-left: 5px;
            display: inline-block;
          }
        }
        .total {
          margin-right: 50px;
          margin-bottom: 16px;
          .freight {
            margin-bottom: 7px;
            .freight-total {
              width: 84px;
              text-align: right;
              display: inline-block;
              font-weight: bold;
            }
          }
          .money-all {
            .money-total {
              width: 84px;
              text-align: right;
              display: inline-block;
              font-weight: bold;
            }
          }
          .textC-main {
            color: $color-main;
          }
        }
      }
    }
    // 总计
    .all {
      background-color: $color-white;
      margin-top: 20px;
      padding: 32px 40px 32px 20px;
      border: 1px solid #ddd;
      .text-all {
        font-size: $fontSizeE;
        color: $color-dark;
      }
      .count {
        margin-right: 50px;
      }
      .textC {
        color: $color-dark;
      }
      .textC-main {
        color: $color-main;
        font-size: $fontSizeE;
      }
    }
  }
  // 模态框
  .dialog-modal {
    .bg {
      background-color: #000;
      opacity: 0.4;
      position: fixed;
      z-index: 8;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .modal {
      width: 462px;
      height: auto;
      background-color: $color-white;
      position: fixed;
      z-index: 9;
      top: 25%;
      left: 0;
      right: 0;
      margin: 0 auto;
      padding: 33px 60px;
      .tiltle {
        width: 56px;
        text-align: right;
        color: $color-disabled;
        font-size: 14px;
        margin-right: 33px;
        vertical-align: top;
        display: inline-block;
        margin-top: 4px;
      }
      .detail {
        margin-bottom: 20px;
        .select {
          width: 150px;
          display: inline-block;
        }
        textarea {
          width: 248px;
          display: inline-block;
          resize: none;
          overflow: hidden;
          min-height: 90px;
          padding: 3px 10px;
          &::-moz-placeholder {
            font-size: 14px;
            color: $color-disabled;
          }
        }
        .upload {
          width: 248px;
          display: inline-block;
        }
      }
      .btn-main {
        margin-top: 10px;
        text-align: center;
        .btnC {
          width: 231px;
          background-color: $color-main;
          color: $color-white;
        }
      }
    }
  }

  // 订单流程
  .item-main{
    width: 100%;
    .item-proce{
      text-align: center;
      background-color: $color-white;
    }
  }
  .order-img {
    width: 180px;
    height: 41px;
    margin: 8px 0 20px;
  }
  .bg-c1{
    background-image: url('../../assets/order.png');
    background-repeat: no-repeat;
  }
  .bg-c2{
    background-image: url('../../assets/icon-greyEval.png');
    background-repeat: no-repeat;
  }
  // 未评价图片
  .bg-c3{
    background-image: url('../../assets/icon_lightprocess.png');
    background-repeat: no-repeat;
  }
  // 已评价
  .bg-c4{
    background-image: url('../../assets/icon-eval.png');
    background-repeat: no-repeat;
  }
  .f-l{
    float: left;
    .fontTitle {
      color: $color-dark;
    }
    .fontTime {
      font-size: $fontSize;
      color: $color-gray;
    }
  }
  // 物流时间轴
  .dev-info {
    .dev-title {
      border-bottom: 1px solid $border-gray-light;
      padding-bottom: 8px;
      span {
        font-weight: 600;
      }
    }
    .logistics {
      padding: 15px 0 20px 0;
      .time-group {
        margin-bottom: 14px;
        position: relative;
        &:first-child {
          &::before {
            background-image: url(../../assets/logistics-now.png);
          }
          .date-week {
            color: #FF6C00 !important;
          }
        }
        &:last-child {
          margin-bottom: 0;
          &::after {
            background-color: transparent;
          }
        }
        .time-number {
          width: 120px;
          text-align: center;
          padding: 0px 0px 12px 0px;
          
          .date {
            font-size: 12px;
            color: #9B9B9B;
            margin-bottom: 8px;
          }
          .date-week {
            color: #333333;
            font-size: 14px;
          }
          .week {
            margin-left: 8px;
          }

        }
        .logistics-info {
          position: relative;
          display: inline-block;
          margin: 8px 0 20px 50px;
          max-width: 550px;
        }

        &:after {
          content: "";
          display: block;
          position: absolute;
          height: calc(100% - 0px);
          width: 2px;
          top: 28px;
          left: 138px;
          background-color: #DDDDDD;
        }

        &:before {
          content: "";
          display: block;
          width: 18px;
          height: 18px;
          position: absolute;
          top: 8px;
          left: 130px;
          right: 20px;
          z-index: 10;
          background-image: url(../../assets/logistics-over.png);
          background-repeat: no-repeat;
        }
        .clear {
          clear: both;
          overflow: hidden;
        }
      }
    }
  } 
</style>
